<template>
  <div class="env-health-index">
    <h3 class="title">环境健康指数</h3>
    
    <div class="score-section">
      <div class="score-title">茶园生态综合评分</div>
      <div class="score-value">82</div>
      <div class="score-label">良好</div>
      <div class="score-compare">较上月 <span class="up">↑ 2分</span></div>
    </div>
    
    <div class="indices">
      <div class="index-item">
        <div class="index-label">气候适宜性</div>
        <div class="progress-bar">
          <div class="progress" style="width: 90%"></div>
        </div>
      </div>
      
      <div class="index-item">
        <div class="index-label">土壤健康</div>
        <div class="progress-bar">
          <div class="progress yellow" style="width: 85%"></div>
        </div>
      </div>
      
      <div class="index-item">
        <div class="index-label">水质状况</div>
        <div class="progress-bar">
          <div class="progress" style="width: 95%"></div>
        </div>
      </div>
      
      <div class="index-item">
        <div class="index-label">空气质量</div>
        <div class="progress-bar">
          <div class="progress" style="width: 90%"></div>
        </div>
      </div>
      
      <div class="index-item">
        <div class="index-label">微生物活性</div>
        <div class="progress-bar">
          <div class="progress" style="width: 88%"></div>
        </div>
      </div>
    </div>
    
    <div class="suggestions">
      <h4>环境优化建议</h4>
      <ul>
        <li>气候条件优越，适合茶树快速生长，注意控制浇水量</li>
        <li>建议增加有机肥使用，提高土壤有机质含量</li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, defineExpose } from 'vue';

// 环境健康数据
const envHealthData = ref({
  score: 82,
  status: '良好',
  comparison: {
    value: 2,
    isUp: true
  },
  indices: [
    { name: '气候适宜性', value: 80 },
    { name: '土壤健康', value: 80, isYellow: true },
    { name: '水质状况', value: 80 },
    { name: '空气质量', value: 80 },
    { name: '微生物活性', value: 80 }
  ],
  suggestions: [
    '气候条件优越，适合茶树快速生长，注意控制浇水量',
    '建议增加有机肥使用，提高土壤有机质含量'
  ]
});

// 更新环境健康数据
function updateData(date) {
  // 这里可以根据日期更新数据
  // 实际应用中可能需要从API获取数据
  console.log('更新环境健康数据:', date);
  
  // 示例：根据日期生成不同的数据
  const day = date.getDate();
  
  // 根据日期调整评分和指标
  envHealthData.value = {
    score: 80 + (day % 10),
    status: day % 10 > 5 ? '优秀' : '良好',
    comparison: {
      value: day % 5,
      isUp: day % 2 === 0
    },
    indices: [
      { name: '气候适宜性', value: 80 },
      { name: '土壤健康', value: 80, isYellow: true },
      { name: '水质状况', value: 80 },
      { name: '空气质量', value: 80 },
      { name: '微生物活性', value: 80 }
    ],
    suggestions: [
      '气候条件优越，适合茶树快速生长，注意控制浇水量',
      '建议增加有机肥使用，提高土壤有机质含量'
    ]
  };
}

// 对外暴露更新方法
defineExpose({
  updateData
});

// 初始化
onMounted(() => {
  // 初始化数据
});
</script>

<style scoped>
.env-health-index {
  background-color: #f0f7ff;
  border-radius: 8px;
  padding: 16px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.title {
  font-size: 16px;
  font-weight: bold;
  margin: 0 0 16px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid #e0e9f5;
}

.score-section {
  background-color: #f0f7ff;
  border-radius: 8px;
  padding: 16px;
  text-align: center;
  margin-bottom: 16px;
}

.score-title {
  font-size: 14px;
  color: #333;
  margin-bottom: 8px;
}

.score-value {
  font-size: 36px;
  font-weight: bold;
  color: #4CAF50;
  margin-bottom: 4px;
}

.score-label {
  font-size: 14px;
  color: #4CAF50;
  margin-bottom: 8px;
}

.score-compare {
  font-size: 12px;
  color: #666;
}

.up {
  color: #4CAF50;
}

.down {
  color: #F44336;
}

.indices {
  margin-bottom: 16px;
}

.index-item {
  margin-bottom: 12px;
}

.index-label {
  font-size: 13px;
  color: #333;
  margin-bottom: 4px;
}

.progress-bar {
  height: 8px;
  background-color: #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
}

.progress {
  height: 100%;
  background-color: #4CAF50;
  border-radius: 4px;
}

.progress.yellow {
  background-color: #FFC107;
}

.suggestions {
  margin-top: auto;
}

.suggestions h4 {
  font-size: 14px;
  margin: 0 0 8px 0;
  color: #333;
}

.suggestions ul {
  margin: 0;
  padding-left: 20px;
}

.suggestions li {
  font-size: 13px;
  color: #555;
  margin-bottom: 6px;
  line-height: 1.4;
}
</style> 